<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入 babel 文件  语法转换,将 ES 新语法转为 ES5  polyfill -->
    <!-- babel 可以将 jsx 语法转为 JS 语法 -->
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 创建虚拟 DOM 对象
      // let h2 = <h2 title='名言警句' abc="200">太阳落山并不代表他输了，而是他来了。</h2>; //JSX 

      //创建一个相对复杂的结构
      let div = <div>
          <h2>哭也不会改变什么，这个世界从来不会对任何人温柔</h2>
          <p>要优秀啊，不然怎么遇见优秀的人！<a href="https://hitokoto.cn/" target="_blank">一言</a></p>
        </div>;

      //渲染
      ReactDOM.render(div, document.querySelector('#root'));
    </script>
  </body>
</html>
